<template>
	<view class="main">
		<view class="header">
			<view class="title">
				Hi，您好！
			</view>
			<view class="desc">
				欢迎进入营销管理系统
			</view>
		</view>
		<view class="form_warp">
			<view class="row">
				<view class="label f30">
					账号
				</view>
				<view class="input_warp">
					<input type="text" class="f28" v-model="formData.username" placeholder="请输入您的账号">
				</view>
			</view>
			<view class="row">
				<view class="label f30">
					密码
				</view>
				<view class="input_warp gui-flex gui-align-items-center">
					<input type="password" class="gui-form-input f28 gui-flex1" v-if="isPwd" v-model="formData.password"
						name="password" placeholder="请输入内容" />
					<input type="text" class="gui-form-input f28 gui-flex1" v-if="!isPwd" :disabled="true"
						v-model="formData.password" name="password" placeholder="请输入内容" />
					<text class="gui-form-icon gui-icons gui-text-center" @click="changePwdType"
						:style="{color:isPwd?'#999999':'#008AFF'}">&#xe609;</text>
				</view>
			</view>
		</view>
		<view class="btn_warp">
			<button class="btn_log" @tap="loginFun">登录</button>
		</view>
		<view class="link_bot gui-flex gui-justify-content-center f26">
			<view class="link" @tap="$refs.baiMsg.open()">
				未有账号？
			</view>
			<view class="link" style="color: rgba(0,0,0,0.1);margin: 0 30rpx;">
				|
			</view>
			<view class="link right" @click="$u.to(`/pages/login/forgotPassword`)">
				忘记密码？
			</view>
		</view>
		<bai-msg :imgType="false" :btnShow="false" msg="未有账号？
请联系相关管理人员" ref="baiMsg"></bai-msg>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				// 密码可视 类型切换
				isPwd: true,
				isClick: true,
				formData: {
					password: '',
					username: ''
				}
			}
		},
		methods: {
			...mapActions(['login']),
			// 登录
			async loginFun() {
				if(!this.formData.username) return this.$u.msg("请输入账号")
				if(!this.formData.password) return this.$u.msg("请输入密码")
				if(this.isClick) {
					this.isClick = !this.isClick;
				}else {
					return;
				}
				uni.showLoading({
					title: '登录中...'
				})
				let result = await this.login(this.formData);
				uni.hideLoading();
				if(result.code == 200) {
					uni.$emit('onload')
					this.$u.to(`/pages/index/index`, 'switchTab')
				}else {
					this.isClick = true;
				}
			},
			// 密码可视 类型切换
			changePwdType: function() {
				this.isPwd = !this.isPwd;
			},
		}
	}
</script>

<style lang="scss">
	@import "login.scss";
</style>